<template>
  <div class="vitualKeyBoard !h-full custom-text-24!">
    <div :class="keyboardClass"></div>
  </div>
</template>

<script setup lang="ts">
import Keyboard from 'simple-keyboard'
import 'simple-keyboard/build/css/index.css'
import { onMounted, reactive, ref, watch, onActivated } from 'vue'
import { propTypes } from '@/utils/propTypes'
/**会员搜索键盘 */
// 声明props
const props = defineProps({
  keyboardClass: propTypes.string.def('keyboard'),
  modelValue: propTypes.string.def('')
})
const emit = defineEmits(['onKeyPress', 'update:modelValue'])
const keyboard = ref()
// 声明变量
const keyboardClass = ref(props.keyboardClass) //键盘样式
const displayDefault = reactive({
  '{bksp}': '←',
  '{shift}': '123',
  '{change}': '英'
}) //按钮默认文字
// 声明方法

const onChange = (input: any) => {
  emit('update:modelValue', input)
}
const onKeyPress = (button: string) => {
  emit('onKeyPress', button)
  /**
   * If you want to handle the shift and caps lock buttons
   */
  if (button === '{shift}' || button === '{lock}') handleShift()
  if (button === '{change}') handleChange()
}
const initKeyboard = () => {
  if (keyboard.value) {
    return
  }
  keyboard.value = new Keyboard(keyboardClass.value, {
    onChange: onChange,
    onKeyPress: onKeyPress,
    layout: {
      // 默认布局
      default: ['Q W E R T Y U I O P', 'A S D F G H J K L', '{shift} Z X C V B N M {bksp}'],
      // shift布局
      shift: ['7 8 9', '4 5 6', '1 2 3', '{shift} 0 {bksp}']
    },
    // 按钮展示文字
    display: displayDefault,
    buttonTheme: [
      {
        class: 'hg-red close',
        buttons: '{change}'
      }
    ]
  }) //键盘初始化
}

const handleClear = () => {
  keyboard.value.clearInput()
} //清空输入
//在子组件中暴露出handleClear方法
const handleShift = () => {
  let currentLayout = keyboard.value.options.layoutName
  let shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
  if (shiftToggle == 'shift') {
    displayDefault['{shift}'] = '英'
  } else {
    displayDefault['{shift}'] = '123'
  }
  keyboard.value.setOptions({
    layoutName: shiftToggle
  })
} //监听数字键盘和英文键盘的切换
const handleChange = () => {
  if (keyboard.value.options.layoutCandidates !== null) {
    // 切换至英文
    displayDefault['{change}'] = '英'
    keyboard.value.setOptions({
      layoutCandidates: null,
      display: displayDefault
    })
  } else {
    // 切换至中文
  }
} //监听中文英文的切换
// 监听input的变化
watch(
  () => props.modelValue,
  () => {
    if (keyboard.value) {
      keyboard.value.setInput(props.modelValue)
    }
  },
  {
    immediate: true
  }
)
defineExpose({ handleClear, handleChange })

onMounted(() => {
  initKeyboard()
})
onActivated(() => {})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss">
.vitualKeyBoard {
  .hg-theme-default {
    // display: flex;
    height: 100%;
    // width: 100%;
    .hg-rows {
      height: 100%;
      display: flex;
      flex-direction: column;

      .hg-row {
        flex: 1;
        display: flex;
        justify-content: center;

        .hg-button {
          width: 100% !important;
          height: 100% !important;
          font-weight: 500;
        }
      }
    }
  }
}
.dark .vitualKeyBoard {
  .hg-theme-default {
    // display: flex;
    background: var(--el-bg-color);
    height: 100%;
    // width: 100%;
    .hg-rows {
      height: 100%;
      display: flex;
      flex-direction: column;

      .hg-row {
        flex: 1;
        display: flex;
        justify-content: center;

        .hg-button {
          width: 100% !important;
          height: 100% !important;
          font-weight: 500;
          border-bottom: 1px solid var(--el-bg-color-overlay);
          background: var(--el-bg-color-overlay);
        }
      }
    }
  }
}
</style>
